<template>
  <div>
    <el-table :data="tableData"
              size="small"
              border
              stripe>
      <el-table-column prop="territory"
                       label="区域"
                       align="center">
      </el-table-column>
      <el-table-column v-for="(item, index) in tableData[0].data"
                       :key="index"
                       :label="(index+1) + '月份'"
                       align="center">
        <el-table-column label="小组主跟"
                         align="center">
          <template slot-scope="{row, $index}">
            <span>{{ tableData[$index].data[index]['responsibilityDone'] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="运营主跟"
                         align="center">
          <template slot-scope="{row, $index}">
            <span>{{ tableData[$index].data[index]['operationDone'] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="大区主跟"
                         align="center">
          <template slot-scope="{row, $index}">
            <span>{{ tableData[$index].data[index]['areaDone'] }}</span>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getMonthByMonthStats } from '@/api/maintenance.js'
export default {
  props: {
    searchForm: {
      type: Object
    },
    activeName: {
      type: String
    }
  },
  data() {
    return {
      tableData: [{
        territory: '',
        data: []
      }
      ]
    }
  },
  methods: {
    getTableData() {
      const params = this.searchForm
      params.type = 'area'
      getMonthByMonthStats(params).then(res => {
        if (res.data.success) {
          const result = res.data.data
          this.tableData = result
        }
      })
    }
  },
  watch: {
    activeName() {
      if (this.activeName === 'areaStats') this.getTableData()
    }
  }
}
</script>
